<template>
  <view class="buy-container">
    <view class="buy-title">{{ movieName }}</view>
    <image :src="movieImg" class="buy-img" mode="aspectFill"></image>
    <view class="buy-info">请选择座位：</view>
    <view class="seat-grid">
      <view
        v-for="(row, rowIdx) in seats"
        :key="rowIdx"
        class="seat-row"
      >
        <view
          v-for="(seat, colIdx) in row"
          :key="colIdx"
          class="seat"
          :class="{ selected: seat.selected }"
          @click="toggleSeat(rowIdx, colIdx)"
        >{{ String.fromCharCode(65 + rowIdx) }}{{ colIdx + 1 }}</view>
      </view>
    </view>
    <view class="price-info">
      单价：<text class="price">{{ price }}</text> 元 &nbsp;&nbsp;
      已选：<text class="count">{{ selectedSeats.length }}</text> 张
    </view>
    <view class="total-info">
      合计：<text class="total">{{ totalPrice }}</text> 元
    </view>
    <button class="buy-btn" @click="goToMovie">立即购票</button>

    <view class="title">
		评论
	</view>

	<view class="out">
		<view class="list">
			<view class="row" v-for="(item,index) in lists" :key="item.id">
				<view class="text">{{index+1}}. {{item.title}}</view>
				<view class="close" @click="onClose(index)">
					<icon type="clear" size="26" />
				</view>
			</view>
		</view>
		<view class="count">
			共{{lists.length}}条评论
		</view>
		<view class="comment">
  <input type="text" placeholder="请输入评论..." v-model="iptValut" @confirm="onSubmit" />
  <button :disabled="!iptValut.length" @click="onSubmit">发布</button>
</view>

	</view>
  </view>


  
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const movieName = ref('')
const movieImg = ref('')
const price = ref(0)
const movieUrl = ref('')

// 5行8列座位
const seats = ref(
  Array.from({ length: 5 }, () =>
    Array.from({ length: 8 }, () => ({ selected: false }))
  )
)

onLoad((options) => {
  movieName.value = options.name || ''
  movieImg.value = options.img || ''
  movieUrl.value = options.video || ''
  alert(movieUrl.value)
  price.value = Number(options.price) || 0
})

// 选中座位
function toggleSeat(row, col) {
  seats.value[row][col].selected = !seats.value[row][col].selected
}

// 选中的所有座位
const selectedSeats = computed(() => {
  const arr = []
  seats.value.forEach((row, rowIdx) => {
    row.forEach((seat, colIdx) => {
      if (seat.selected) arr.push({ row: rowIdx, col: colIdx })
    })
  })
  return arr
})

const totalPrice = computed(() => selectedSeats.value.length * price.value)




	const lists = ref([{
			id: 111,
			title: "好"
		},
		{
			id: 222,
			title: "好看"
		},
		{
			id: 333,
			title: "好好看"
		},
		{
			id: 444,
			title: "真好好看"
		},
    {
			id: 444,
			title: "真的好好看"
		}
	])

	const iptValut = ref("");

	const onClose = function(index) {
		//加注释  
		lists.value.splice(index, 1); //删除指定下标的元素
	}

	const onSubmit = function() {
		lists.value.push({
			id: Date.now(),
			title: iptValut.value
		}); //添加元素
		iptValut.value = '';
	}

function goToMovie() {
  uni.navigateTo({
    url: `/pages/movie/movie?video=${encodeURIComponent(movieUrl.value)}`
  })
}
</script>

<style lang="scss">
.buy-container {
  min-height: 100vh;
  padding: 40rpx 20rpx 30rpx 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f7f7f7;
  box-sizing: border-box;
  overflow-y: auto;
}
.buy-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
}
.buy-img {
  width: 300rpx;
  height: 420rpx;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
  object-fit: cover;
}
.buy-info {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
}
.seat-grid {
  margin-bottom: 20rpx;
}
.seat-row {
  display: flex;
  justify-content: center;
  margin-bottom: 10rpx;
}
.seat {
  width: 44rpx;
  height: 44rpx;
  background: #eee;
  border-radius: 8rpx;
  margin: 0 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #333;
  cursor: pointer;
  border: 2rpx solid #ccc;
  transition: background 0.2s, border 0.2s;
}
.seat.selected {
  background: #2196f3;
  color: #fff;
  border: 2rpx solid #1976d2;
}
.price-info, .total-info {
  font-size: 28rpx;
  margin-bottom: 10rpx;
  color: #333;
}
.price, .count, .total {
  color: #e53935;
  font-weight: bold;
}
.buy-btn {
  width: 300rpx;
  height: 60rpx;
  background: #e53935;
  color: #fff;
  border-radius: 30rpx;
  font-size: 28rpx;
  margin-top: 20rpx;
}

.title {
  font-size: 30rpx;
  text-align: left;
  color: #333;
  padding: 40rpx 0 20rpx 10rpx;
  width: 100%;
  font-weight: bold;
  letter-spacing: 2rpx;
}

	.out {
  width: 96vw;
  max-width: 700rpx;
  margin: 0 auto 30rpx auto;
  background: #fff;
  box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.08);
  border-radius: 12rpx;
  padding: 20rpx 18rpx 18rpx 18rpx;
  box-sizing: border-box;
}

		.list {
  .row {
    padding: 14rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 26rpx;
    color: #444;
    .text {
      flex: 1;
      padding-right: 10rpx;
      word-break: break-all;
    }
    .close {
      color: #bbb;
      margin-left: 10rpx;
      cursor: pointer;
      transition: color 0.2s;
    }
    .close:active {
      color: #e53935;
    }
  }
}

		.count {
  padding: 12rpx 0 0 0;
  font-size: 22rpx;
  color: #888;
  text-align: right;
}

.comment {
  display: flex;
  margin-top: 18rpx;
  gap: 16rpx;
  input {
    flex: 4;
    background: #f4f4f4;
    border: none;
    height: 54rpx;
    border-radius: 12rpx;
    padding: 0 20rpx;
    color: #333;
    font-size: 30rpx;
    outline: none;
  }
  button {
    flex: 1;
    height: 54rpx;
    line-height: 54rpx;      // 让文字垂直居中
    background: #e53935;
    color: #fff;
    border: none;
    border-radius: 12rpx;
    font-size: 30rpx;
    text-align: center;      // 让文字水平居中
    transition: background 0.2s;
    opacity: 1;
    padding: 0;              // 去除内边距影响
  }
  button:disabled {
    background: #ccc;
    opacity: 0.7;
  }
}
</style>